<template>
	<view class="my-address">
		<u-navbar title="收货地址" bgColor="#fff" :autoBack="true">
		</u-navbar>
		<template v-if="addressList.length > 0">
			<u-checkbox-group shape="circle" activeColor="#F64D48" v-model="goodsChecked" placement="column">
				<view class="address-info" v-for="(item,index) in addressList" :key="index">
					<view class="ad-de">
						<span v-if="item.isDefault == 0" class="defalt-btn">默认</span>
						<span class="detail">{{item.province}}{{item.city}}{{item.district}}</span>
					</view>
					<view class="title">
						<h3>{{item.detailedAddress}}</h3>
					</view>
					<view class="addUser">
						<span class="detail">{{item.name}}{{item.mobile}}</span>
					</view>
					<view class="btn">
						<label>
							<!-- <u-checkbox :key="index" :name="item.id"></u-checkbox> -->
						</label>
						<view class="del">
							<p @tap="edit(item)">
								<u-icon name="edit-pen" size="13"></u-icon>
								编辑
							</p>
							<p @tap="del(item)">
								<u-icon name="trash" size="13"></u-icon>
								删除
							</p>
						</view>
					</view>
				</view>
			</u-checkbox-group>

			<view class="addAddress" @click="toAdd()">
				新增收货地址
			</view>
		</template>

		<template v-else>
			<view class="noAddBox flex_shu">
				<image :src="imgUrl + 'noAddressBg.png'" mode="" class="noImg"></image>
				<view style="color: #333333;font-size: 33rpx;font-weight: 700;">
					暂无地址
				</view>
				<view style="color: #687383;font-size: 30rpx;font-weight: 700;margin-top: 12rpx;">
					当前暂无地址，<text style="color: #34DFA3;" @click="toAdd()">立即添加</text>
				</view>
			</view>
		</template>

		<!-- 	<view class="footer">
			<u-button v-if="from!='order'" @click="toAdd()" shape="circle" type="error" text="新增收货地址"></u-button>
			<u-button v-if="from=='order'" @click="determine()" shape="circle" type="error" text="确定"></u-button>
		</view> -->

	</view>
</template>

<script>
	import {
		getAddressList,
		delAddress
	} from '@/api/api.js'
	export default {
		data() {
			return {
				imgUrl: this.$imgUrl,
				pitchOnList: [],
				isBatch: false,
				addressList: [],
				from: "",
				goodsChecked: [],
			};
		},
		onLoad(options) {
			this.from = options.from
		},
		onShow() {
			this.getList()
		},
		methods: {

			//选择确认
			determine() {
				if (this.goodsChecked.length >= 2) {
					// 提示只能选择一个
					uni.showToast({
						title: '只能选择一个地址',
						icon: 'none'
					})
					return;
				}

				const address = this.addressList.find(item => item.id == this.goodsChecked[0])
				uni.setStorageSync('address', address)
				uni.navigateBack({
					delta: 1
				})
			},

			getList() {
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				getAddressList().then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						console.log(res);
						this.addressList = res.rows
					}
				})
			},
			checkboxChange(val) {
				this.pitchOnList = val.detail.value
			},
			del(item) {
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				delAddress(item.id).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.$u.toast('操作成功')
						this.getList()
					}
				})
			},
			edit(item) {
				uni.navigateTo({
					url: `/pages/package/addAddress/addAddress?id=${item.id}`
				})
			},
			toAdd() {
				uni.navigateTo({
					url: '/pages/package/addAddress/addAddress'
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-address {
		min-height: 100vh;
		padding: 200rpx 0rpx 158rpx;
		box-sizing: border-box;
		background-color: #F6F6F6;
		position: relative;

		.addAddress {
			margin: auto;
			width: 694rpx;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 438rpx;
			opacity: 1;
			background: linear-gradient(-49.9deg, #00bf39 0%, #34dfa3 100%);
			color: #ffffff;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
		}

		.noAddBox {
			width: 100%;
			// height: 100%;
			position: absolute;
			left: 50%;
			top: 360rpx;
			transform: translateX(-50%);

			.noImg {
				width: 316rpx;
				height: 316rpx;
			}
		}

		.address-info {
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 28rpx;
			box-sizing: border-box;
			margin: 0 28rpx 28rpx;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				h3 {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					display: flex;
					align-items: center;

					b {
						margin-left: 16rpx;
					}
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.ad-de {
				padding-bottom: 14rpx;
				box-sizing: border-box;

				.defalt-btn {
					font-weight: 400;
					font-size: 20rpx;
					border-radius: 4rpx;
					color: #FFF;
					background: linear-gradient(-49.9deg, #00bf39 0%, #34dfa3 100%);
					width: 70rpx;
					height: 36rpx;
					text-align: center;
					line-height: 36rpx;
					display: inline-block;
				}

				.detail {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-left: 16rpx;
				}
			}

			.addUser {
				margin-top: 14rpx;
				color: #666666;
				text-align: left;
				font-size: 24rpx;
				font-weight: 400;
			}

			.btn {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.del {
					font-weight: 400;
					font-size: 24rpx;
					color: #666;
					display: flex;
					align-items: center;

					p {
						display: flex;
						align-items: center;
						margin-left: 28rpx;
					}
				}
			}
		}



		.footer {
			width: 100%;
			height: 158rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.u-button {
				width: 80%;
				background: #1078f9;
				border: 1rpx solid #1078f9;
				border-radius: 92rpx;
			}
		}
	}
</style>